介紹

在前端開發中，數據驗證是一個不可忽視的重要步驟，特別是當你處理表單輸入或 API 響應數據時。雖然 TypeScript 提供了靜態型別檢查功能，確保代碼在編譯時的型別安全，但它 並不能在運行時進行數據驗證 。這時候，我們可以利用 Zod 來補充 TypeScript，進行運行時的數據驗證與解析。

這篇文章將帶你了解如何結合 Zod 與 TypeScript，實現高效且靈活的數據驗證流程。

什麼是 Zod?

Zod 是一個與 TypeScript 深度整合的數據驗證庫，能夠在運行時驗證數據並自動推斷 TypeScript 型別。與其它數據驗證庫（如 Joi 和 Yup）相比，Zod 更加輕量，且專注於與 TypeScript 的無縫結合。(本人在 Zod 的操作上已經有三年的經驗，已經算是老屁股拉ＸＤ，如果要講 zod 的進階應用，往後會考慮開一個 zod 的進階應用，和奇淫巧技)

步驟 1：安裝 Zod

首先，在你的項目中安裝 Zod(如果不知道 bun 是什麼請參考 Day01有簡單的說明)：

bun add zod

步驟 2：定義 Zod Schema

Zod 的強大之處在於可以輕鬆定義數據結構的 schema，並進行驗證。以下是一個簡單的範例，我們將定義一個用戶資料的 schema，驗證用戶名、電子郵件和年齡。

import * as zod from 'zod';

const userSchema = zod.object({
  username: zod.string().min(3, '用戶名必須至少 3 個字符'),
  email: zod.string().email('無效的電子郵件地址'),
  age: zod.number().min(18, '年齡必須至少 18 歲'),
});

步驟 3：驗證數據

現在我們來驗證一些實際的用戶數據。Zod 提供了 parse 方法來驗證數據，若數據無效，將會拋出錯誤。

const userData = {
  username: 'Alice',
  email: 'alice@example.com',
  age: 20,
};

try {
  const validatedData = userSchema.parse(userData);
  console.log('驗證通過:', validatedData);
} catch (error) {
  console.error('驗證失敗:', error.errors);
}

在這個範例中，parse 方法會返回經過驗證且格式正確的數據，或在驗證失敗時返回錯誤訊息。

如果不喜歡 parse 要包在 try/catch內，還有一個更簡化的寫法

const userData = {
  username: 'Alice',
  email: 'alice@example.com',
  age: 20,
};

const validator = userSchema.safeParse(userData);
if (validator.success) {
  console.log('驗證通過:', validator.data);
} else {
  console.error('驗證失敗:', validator.error.errors);
}

步驟 4：處理嵌套結構

Zod 可以輕鬆處理嵌套的數據結構。比如我們現在想為用戶添加地址信息，並對地址進行驗證：

const addressSchema = zod.object({
  street: zod.string(),
  city: zod.string(),
  postalCode: zod.string().length(5, '郵政編碼必須為 5 位數字'),
});

const extendedUserSchema = UserSchema.extend({
  address: AddressSchema,
});

const userWithAddress = {
  username: 'Bob',
  email: 'bob@example.com',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'New York',
    postalCode: '10001',
  },
};

try {
  const validatedUser = extendedUserSchema.parse(userWithAddress);
  console.log('嵌套數據驗證通過:', validatedUser);
} catch (error) {
  console.error('嵌套數據驗證失敗:', error.errors);
}

// 或是以下寫法

const validator = extendedUserSchema.safeParse(userData);
if (validator.success) {
  console.log('嵌套數據驗證通過:', validator.data);
} else {
  console.error('嵌套數據驗證失敗:', validator.error.errors);
  console.error('驗證失敗:', validator.error.errors);
}

這裡，我們使用了 extend 方法將 userSchema 擴展為一個新的 schema，加入了地址信息的驗證。這樣可以輕鬆應對複雜的數據結構。

步驟 5：異步數據驗證

Zod 也支持異步驗證，這對於處理 API 響應等情境非常實用。我們可以使用 safeParseAsync 方法來處理異步數據驗證，並且避免拋出異常。

async function validateUserData() {
  const response = await fetch('https://api.example.com/user');
  const userData = await response.json();

  const result = await extendedUserSchema.safeParseAsync(userData);

  if (result.success) {
    console.log('數據驗證通過:', result.data);
  } else {
    console.error('數據驗證失敗:', result.error.errors);
  }
}

validateUserData();

(這裡在 Day15 會有更詳實的介紹，關於同步非同步使用 zod)

這個方法會返回一個包含 success 屬性的對象，方便你根據結果來處理後續邏輯。

步驟 6：與 TypeScript 的深度整合

Zod 的另一個優勢是可以與 TypeScript 深度結合。當我們定義好 schema 之後，TypeScript 可以自動推斷數據的型別。

type User = zod.infer<typeof userSchema>;

const newUser: User = {
  username: 'Charlie',
  email: 'charlie@example.com',
  age: 28,
};

這樣做的好處是，我們不需要手動定義型別，Zod 會根據 schema 自動推斷出正確的 TypeScript 型別。

結論

Zod 提供了一個靈活且功能強大的工具，能夠在運行時進行數據驗證，同時與 TypeScript 完美結合。通過本篇文章，我們學習了如何定義 Zod schema，驗證數據，處理嵌套結構和異步數據，以及利用 Zod 與 TypeScript 的型別推斷功能來提高開發效率。

Zod 在數據驗證方面的靈活性和與 TypeScript 的深度整合，使得它成為前端開發中處理複雜數據驗證的不二選擇。接下來的文章中，我們將進一步探索如何將 Zod 應用到實際的 Vue 項目中。